<template>
	<up-popup :show="show" mode="center" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					取消订单
				</view>
				<view class="line">
					<view class="label">取消原因</view>
					<view class="value">
						{{ data?.reason_name}}
					</view>
				</view>
				<u--textarea v-model="data.reason_info" disabled placeholder="请输入详细的取消原因"></u--textarea>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="userAgreestCancelOrder(2)" type="info" text="不同意"></up-button>
					</view>
					<view class="">
						<up-button @click="userAgreestCancelOrder(1)" type="primary" text="同意"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import order from '@/api/order.js'
	import utils from '@/utils/util.js'
	const props = defineProps({
		id: {
			type: [String, Number],
			default: ''
		},
		data: {
			type: Object,
			default: () => {}
		}
	})
	const show = ref(false)
	const handleClick = () => {
		show.value = true
	}
	defineExpose({
		handleClick
	})
	const emits = defineEmits(['change'])
	const userAgreestCancelOrder = async (type) => {
		const {
			status,
			info,
			data
		} = await order.userAgreestCancelOrder({
			id: props.id,
			is_agree: type
		})
		utils.toast(info)
		if (status == 1) {
			show.value = false
			emits('change')
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F5F5F5;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;

		.label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}
	}
</style>